<template>
  <div class="banner">
    <mt-swipe :auto="autoTme">
      <mt-swipe-item  v-for="item in list" :key="item.id">
       <img :src="item.img"/>
      </mt-swipe-item>
    </mt-swipe>
    <div class="loading-container" v-show="!list.length">
      <loading></loading>
    </div>
  </div>
</template>

<script>
  import loading from '@/components/loading/loading';
  export default {
    props:{
      autoTme: Number, // 自动播放时间
      list: Array // banner数据
    },
    mounted() {
      this.$nextTick(() => {
        // @todo 自动高度待解决,后续用swiper解决
        // console.log(this.$refs.img[0].clientHeight);
        // this.bannerHeight = `height:${this.$refs.img[0].clientHeight}px`;
      });
    },
    data() {
      return {
        // bannerHeight: 'height:120px'
      }
    },
    components: {
      loading
    }
  }
</script>

<style scoped lang="less">
  @import '../../common/less/variable';
  .banner{
    position: relative;
  }
  .banner .mint-swipe{
    height: 150px;
    background-color: @color-background-d;
  }
  .banner img{
    width: 100%;
    //height: auto;
    height: 100%;
    background-size: 100% 100%;
    background-position: center center;
  }
  .loading-container{
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    flex: 1;
    text-align: center;
    .loading{
      margin-top: 26px;
    }
  }
</style>
